﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Recruitment Zone | Log in </title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
    
    <!-- Theme style -->
    <link href="~/Content/Css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
   
    <!-- iCheck -->
    <link href="~/Content/plugins/iCheck/square/blue.css" rel="stylesheet" />
   
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
        .invalid {
            border-color: #E9322D !important;
            box-shadow: 0 0 6px #F8B9B7 !important;
        }
        </style>
</head>
<body class="login-page">
            @RenderBody()

    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
   
       
    <!-- Bootstrap 3.3.2 JS -->
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>

    <!-- iCheck -->
    <script src="~/Content/plugins/iCheck/icheck.min.js"></script>
    <script>
        $.fn.goValidate = function () {
            var $form = this,
                $inputs = $form.find('input:text, input:password'),
                $selects = $form.find('select'),
                $textAreas = $form.find('textarea');

            var validators = {
                name: {
                    regex: /^[A-Za-z]{3,}$/
                },
                username: {
                    regex: /^[A-Za-z]{6,}$/
                },
                firstName: {
                    regex: /^[A-Za-z]{3,}$/
                },
                lastName: {
                    regex: /^[A-Za-z]{3,}$/
                },
                town: {
                    regex: /^[A-Za-z]{3,}$/
                },
                postcode: {
                    regex: /^.{3,}$/
                },
                password1: {
                    regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/
                },
                password1_repeat: {
                    regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/
                },
                email: {
                    regex: /^[\w\-\.\+]+\[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
                },
                phone: {
                    regex: /^[2-9]\d{2}-\d{3}-\d{4}$/,
                },
                body: {
                    regex: /^.{3,}$/
                },
                country: {
                    regex: /^(?=\s*\S).*$/,
                }
            };
            var validate = function (klass, value) {
                var isValid = true,
                    error = '';

                if (!value && /required/.test(klass)) {
                    error = 'This field is required';
                    isValid = false;
                } else {
                    klass = klass.split(/\s/);
                    $.each(klass, function (i, k) {
                        if (validators[k]) {
                            if (value && !validators[k].regex.test(value)) {
                                isValid = false;
                                error = validators[k].error;
                            }
                        }
                    });
                }
                return {
                    isValid: isValid,
                    error: error
                }
            };
            var showError = function ($e) {
                var klass = $e.attr('class'),
                    value = $e.val(),
                    test = validate(klass, value);

                $e.removeClass('invalid');
                $('#form-error').addClass('hide');

                if (!test.isValid) {
                    $e.addClass('invalid');

                    if (typeof $e.data("shown") == "undefined" || $e.data("shown") == false) {
                        $e.popover('show');
                    }

                }
                else {
                    $e.popover('hide');
                }
            };

            $inputs.keyup(function () {
                showError($(this));
            });
            $selects.change(function () {
                showError($(this));
            });
            $textAreas.keyup(function () {
                showError($(this));
            });

            $inputs.on('shown.bs.popover', function () {
                $(this).data("shown", true);
            });

            $inputs.on('hidden.bs.popover', function () {
                $(this).data("shown", false);
            });

            $form.submit(function (e) {

                $inputs.each(function () { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                $selects.each(function () { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                $textAreas.each(function () { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                if ($form.find('input.invalid').length) { /* form is not valid */
                    e.preventDefault();
                    $('#form-error').toggleClass('hide');
                }
            });
            return this;
        };



        $('form').goValidate();

     
    </script>
</body>
</html>